<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<button>get</button>
	<button>post</button>
</body>
<script>
	const btns = document.querySelectorAll("button");
	btns[0].onclick = async function(){
		// xhr fetch
		// 1- fetch是window下的一个函数
		// console.log(window.fetch);
		// console.log(fetch);
		
		// 2- xhr---->ajax1.0   fetch----->ajax2.0
		// 2-1- 请求方式,默认是GET请求方式（不需要设置）
		// 2-2- 请求地址
		// 2-3- 发送的参数
		// 2-4- 响应的结果
		// 接收的第一个参数即是请求的地址。
		// fetch("./readme.md");
		
		// fetch的返回值是一个Promise实例
		// const p = fetch("./1- fetch.html");
		// console.log(p);
		
		// p的promise实例的成功值是一个Response实例
		// const p = fetch("./1- fetch.html");
		// p.then(value=>{
		// 	// text函数是Response原型中的函数。返回的还是一个Promise实例，该实例的成功值为响应体信息（格式为文档）
		// 	// console.log(value.text());
		//
		// 	value.text().then(ResponseBody=>{
		// 		console.log(ResponseBody);
		// 	})
		// })
		
		
		// 如果响应体是JSON,要对其进行处理有两种方案
		// const p = fetch("./data.json");
		// p.then(value=>{
		// 	// 1- 使用JSON.parse
		// 	// value.text().then(ResponseBody=>{
		// 	// 	console.log(JSON.parse(ResponseBody));// 响应体
		// 	// })
		//
		// 	// 2- 使用Response的原型方法json
		// 	value.json().then(body=>{
		// 		console.log(body);
		// 	})
		// })
		
		// 注意：只要你请求的服务接口地址有响应p即为成功
		// 为失败的场景：请求的服务不存在。
		// const p = fetch("http://127.0.0.1/1-fetch.html");
		// p.then(value=>{
		// 	value.text().then(body=>{
		// 		console.log(body);// 响应体信息
		// 	})
		// }).catch(reason=>{
		// 	console.log("异常信息",reason);
		// })
		
		// 发送请求成功后，如果转换失败那么也会执行到catch(fetch返回的还是成功的)
		// const p = fetch("./1- fetch.html");
		// p.then(value=>{
		// 	return value.json().then(body=>{
		// 		console.log(body);
		// 	})
		// }).catch(reason=>{
		// 	console.log("异常111",reason);
		// })
		
		// const p = fetch("./1- fetch111.html");
		// p.then(value=>{
		// 	const {status,statusText} = value;
		// 	if(value.status === 200){
		// 		value.text().then(body=>{
		// 			console.log("成功响应体",body);
		// 		});
		// 		return;
		// 	}
		// 	return Promise.reject({
		// 		status,
		// 		statusText
		// 	});
		// }).catch(reason=>{
		// 	console.log("异常111",reason);
		// })
		
		// 3- 获取到响应体1
		// fetch("./1- fetch.html").then(value=>{
		// 	value.text().then(body=>{
		// 		console.log(body);
		// 	})
		// });
		
		// 4- 获取到响应体
		// fetch("./1- fetch.html").then(value=>{
		// 	return value.text()
		// }).then(body=>{
		// 	console.log(body);
		// });
		
		// 5- async await
		// try{
		// 	const result = await fetch("http://127.0.0.1/1- fetch.html");
		// 	const body = await result.text();
		// 	console.log(body);
		// }catch(err){
		// 	console.log(err);
		// }
		
		function ajax(url,config ={}){// {type:"text"}
			const {type="json"} = config;
			return fetch(url).then(value=>{
				return value[type]();
			})
		};
		// const body = await ajax("./1- fetch.html",{type:"text"});
		const body = await ajax("./data.json");
		console.log(body);
		
	
		
		
		
	}
</script>
</html>